<template>
  <div class="container" @touchmove.prevent>
    <navbar
      :vaniconL="true"
      :vaniconR="true"
      :noRight="true"
      :noLeft="false"
      iconNameL="arrow-left"
      iconNameR="search"
      @clickLeft="goBack"
      >{{ $t("password.change_password") }}</navbar
    >
    <!-- <img class="logo" src="@/assets/images/company_logo.png" alt /> -->
    <div class="change-form">
      <van-form @submit="onforgetSubmit">
        <div class="field2">
          <van-cell-group
            ><van-field
              v-model="fgPhone"
              name="fgPhone"
              :disabled="true"
              placeholder="请输入您的手机号码"
              label="手机"
            />
            <van-field
              v-model="fgCode"
              name="fgCode"
              required
              center
              clearable
              :rules="[{ required: true, message: '请填写验证码' }]"
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  :disabled="forgetcodeFlag"
                  @click="checkForgetCode"
                  size="small"
                  type="primary"
                  >{{
                    forgetcodeFlag ? forgetcodeTime : "发送验证码"
                  }}</van-button
                >
              </template>
            </van-field>
            <van-field
              v-model="fgPassword1"
              required
              name="fgPassword1"
              type="password"
              :rules="[
                {
                  pattern: pattern2,
                  message: '至少6-16个字符，至少1个小写字母和1个数字',
                },
              ]"
              placeholder="请输入重置密码"
              label="密码"
            />
            <van-field
              v-model="fgPassword2"
              name="fgPassword2"
              required
              type="password"
              placeholder="请再次输入重置密码"
              :rules="[{ validator: validator2, message: '密码不一致' }]"
              label="密码"
            />
          </van-cell-group>
          <van-button
            style="margin-top: 0.3rem"
            class="login-btn"
            type="primary"
            color="#4779e7"
            round
            block
            >修改</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { changePassword } from "@/api/mine";
import { appsChangePassword, wxvcode } from "@/api/home";
import { Dialog } from "vant";
import { Toast } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "password",
  components: { navbar },
  data() {
    return {
      username: "",
      password: "",
      password2: "",
      fgPhone: "",
      fgCode: "",
      fgPassword1: "",
      fgPassword2: "",
      forgetcodeTime: "",
      forgetTimer: null,
      pattern2: /^(?=.*[a-z])(?=.*\d)[^]{6,16}$/,
      pattern3: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
      forgetcodeFlag: false,
    };
  },
  computed: {
    ...mapGetters(["userData"]),
  },
  watch: {},
  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/mine" });
    },
    validator2(val) {
      if (val != this.fgPassword1) {
        return false;
      }
    },
    // 忘记密码验证码
    async checkForgetCode() {
      let code = this.fgCode;
      let flag = this.pattern3.test(this.fgPhone);
      if (this.fgPhone == "" || flag == false) {
        Toast.fail("请输入手机号码");
      } else {
        let res = await wxvcode(this.fgPhone, 5);
        if (res.data.status == "OK") {
          Toast.success("发送成功");
          const TIME_COUNT = 60;
          if (!this.forgetTimer) {
            this.forgetcodeTime = TIME_COUNT;
            this.forgetcodeFlag = true;
            this.forgetTimer = setInterval(() => {
              if (
                this.forgetcodeTime > 0 &&
                this.forgetcodeTime <= TIME_COUNT
              ) {
                this.forgetcodeTime--;
              } else {
                this.forgetcodeFlag = false;
                clearInterval(this.forgetTimer);
                this.forgetTimer = null;
              }
            }, 1000);
          }
        } else if (res.data.status == "isv.BUSINESS_LIMIT_CONTROL") {
          Toast.fail("发送验证码超过限制次数五次");
          const TIME_COUNT = 60;
          if (!this.forgetTimer) {
            this.forgetcodeTime = TIME_COUNT;
            this.forgetcodeFlag = true;
            this.forgetTimer = setInterval(() => {
              if (
                this.forgetcodeTime > 0 &&
                this.forgetcodeTime <= TIME_COUNT
              ) {
                this.forgetcodeTime--;
              } else {
                this.forgetcodeFlag = false;
                clearInterval(this.forgetTimer);
                this.forgetTimer = null;
              }
            }, 1000);
          }
        } else {
          Toast.fail("发送验证码超过限制次数五次");
        }
      }
    },
    // 确认修改
    async onforgetSubmit(value) {
      let change = await appsChangePassword(
        value.fgPassword1,
        value.fgPhone,
        value.fgCode
      );
      console.log(change);
      if (change.data.status == 200) {
        Toast.success("修改成功");
        this.pwshow = false;
        this.goBack();
      } else {
        Toast.fail(change.data.msg);
      }
    },
  },
  created() {
    let data = JSON.parse(this.userData);
    this.fgPhone = data.phone;
  },
  mounted() {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.container {
  position: relative;
  height: 100vh;
  background: #f5f5f5;
  overflow: hidden;
  & .logo {
    width: 1rem;
    margin-top: 10px;
  }
  & .change-form {
    // width: 95%;
    margin: auto;
    margin-top: 15px;
    //   overflow: hidden;
    //   border-radius: 10px;
  }
}
</style>